<template>
    <el-main class="mainBox">

        <div class="contentBox" v-if="!isDetailShow">

            <div class="title">
                <label>教研组相册</label>
            </div>

            <el-row :gutter="25">
                <el-col :span="4" v-for="(item, index) in ablumList.list" :key="index"
                 style="padding-left: 82.5px;box-sizing: unset">
                    <div class="grid-content" @click="openDetails(item)">
                        <div class="cover">
                            <el-image :src="item.cover | pictureUrl" style="height:120px"></el-image>
                        </div>
                        <div class="heading">
                            <el-badge :value="item.picturesNum" type="primary">
                                <label>{{item.photoname}}</label>
                            </el-badge>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div class="block">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page" :page-sizes="[8]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>

        <ClassArticleDetail v-if="isDetailShow" :activeIndex="2" :album='albumCache' @closeDetails='closeDetails'></ClassArticleDetail>
    </el-main>
</template>

<script>
    import ClassArticleDetail from '@c/article/classArticleDetail'
    import {mapState} from 'vuex'
    export default {
        computed:{
            ...mapState({
                userInfo: state => state.userModule.userInfo,
                otherUserInfo: state => state.userModule.otherUserInfo,
                group: state =>state.researchModule.group
            })
        },
        components:{
            ClassArticleDetail
        },
        created(){
            if(this.$route.query.album){
                this.openDetails(this.$route.query.album)
            }
        },
        beforeMount(){
            this.researchAlbum()
        },
        data() {
            return {
                src: require('../../../assets/img/headportrait01.jpg'),
                page: 1,
                pageSize: 8,
                total: 0,
                isDetailShow:false,
                ablumList: {},
                albumCache:{}
            }
        },
        methods: {
            closeDetails(){
                this.isDetailShow = false
                this.albumCache = {}
            },
            openDetails(params){
                if(params.picturesNum > 0) {
                    this.albumCache = params
                    this.isDetailShow = true
                }else{
                    this.$message.warning('所选相册暂没有可查看图片，请更换其他相册查看.')
                }
            },
            researchAlbum(){
                this.$store.dispatch('photoalbumModule/albumPageSchool', {
                    sort: 0,
                    groupId: this.group.id,
                    dictype: '96',
                    userid: this.otherUserInfo.xxdm,
                    search: null,
                    limit: this.pageSize,
                    page: this.page,
                }).then(res => {
                    if (res.data.code === 200) {
                        this.total = res.data.totals
                        this.ablumList = res.data.result
                    }
                })
            },
            // 每页显示条数
            handleSizeChange(val) {
                this.pageSize = val
                this.researchAlbum()
            },

            // 当前页
            handleCurrentChange(val) {
                this.page = val
                this.researchAlbum()
            }
        },
    }
</script>

<style lang="scss" scoped>
    /deep/.el-badge__content.is-fixed {
        position: absolute;
        top: 8px ;
        right: 1px;
        transform: translateY(-50%) translateX(100%);
    }
    .mainBox {
        width: 81%;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;

        .contentBox {
            background-color: white;
            box-sizing: border-box;
            padding: 10px;
            width: 100%;

            .title {
                font-size: 14px;
                color: #303133;
                text-align: left;
                box-sizing: border-box;
                padding-bottom: 8px;
                border-bottom: 2px solid #409EFF;
            }

            .grid-content {
                width: 100%;
                margin-top: 12px;
                cursor: pointer;
                background-color: #F2F6FC;
                .heading {
                    text-align: center;
                    font-size: 14px;
                    color: #303133;
                    box-sizing: border-box;
                    padding: 6px 0;
                }
            }

            .block {
                margin-top: 30px;
            }
        }

    }
</style>
